<!-- 潜在顾客详情 -->
<template>
  <div class="customerDetailInfo" style="padding: 10px;">
    <el-card class="card">
      <div
        class="top_nav"
        v-if="pageType === 'details' && formData.customer_status !== 'runaway'"
      >
        <div>
          <p @click="edit">
            <i class="iconfont icon-bianji1"></i>
            编辑
          </p>
          <!-- <p @click="shareCustomer">
                        <i class="iconfont icon-gongxiang"></i>
                        共享
                    </p> -->
          <p @click="createChance = true">
            <i class="iconfont icon-shangji"></i>
            生成商机
          </p>
          <p @click="assignCustomer">
            <i class="iconfont icon-yifenpai"></i>
            分派
          </p>
          <p @click="closeNiche">
            <i class="iconfont icon-liushi"></i>
            已流失
          </p>
          <p @click="followCustomerModal = true">
            <i class="iconfont icon-genjin"></i>
            进行跟进
          </p>
          <p @click="seeJournalModal = true">
            <i class="iconfont icon-rizhi"></i>
            查看潜客日志
          </p>
        </div>
      </div>
      <div
        class="line"
        v-if="pageType === 'detail' && formData.customer_status !== 'runaway'"
      ></div>
      <div class="header_info" v-if="pageType === 'create'">
        <div
          class="header_info_config"
          style="padding-left: 14px;border-right: none;"
        >
          <p>潜在顾客</p>
          <p>新增</p>
        </div>
        <div class="save_info">
          <p @click="handleSubmit('customerManage')">
            <!-- <i class="iconfont icon-close"></i> -->
            保存
          </p>
          <p @click="goToURL('customerManage')">
            <!-- <i class="iconfont icon-close"></i> -->
            关闭
          </p>
        </div>
      </div>
      <div class="header_info" v-if="pageType !== 'create'">
        <div class="header_info_img">
          <!-- <el-upload
                        :class="{'avatar-uploader': !imageUrl}"
                        style="height: 40px;"
                        :action="uploadFileURL"
                        accept="image/jpeg,image/gif,image/png"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        v-if="pageType === 'edit'">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> -->
          <img v-if="pageType !== 'create'" :src="imageUrl" />
        </div>
        <div class="header_info_config" style="padding-left: 14px;">
          <p>潜在顾客</p>
          <p>{{ formData.name }}</p>
        </div>
        <div class="header_info_config">
          <p>潜客状态</p>
          <p>{{ formData.customer_status | filterCustomerStatus }}</p>
        </div>
        <!-- <div class="header_info_config">
                    <p>签约可能性</p>
                    <p>10%</p>
                </div> -->
        <div class="header_info_config">
          <p>负责人</p>
          <p>{{ leader }}</p>
        </div>
        <div class="save_info" v-if="pageType === 'edit'">
          <p @click="handleSubmit('customerInfo')">
            <!-- <i class="iconfont icon-baocun"></i> -->
            保存
          </p>
          <p @click="goToURL('customerManage')">
            <!-- <i class="iconfont icon-close"></i> -->
            关闭
          </p>
        </div>
      </div>
    </el-card>
    <div class="empty"></div>
    <!-- 展示页面 -->
    <el-card class="card" v-if="pageType === 'details'">
      <el-tabs class="tab" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="相关" name="about">
          <div class="config_num">
            <p>
              商机<span>（{{ information.opportunity_count }}）</span>
            </p>
            <p>
              预约记录<span>（{{ information.appointment_count }}）</span>
            </p>
            <p>
              合同<span>（{{ information.contract_count }}）</span>
            </p>
            <p>
              前台调研<span>（{{ information.contractIncome_count }}）</span>
            </p>
            <p>
              跟进记录<span>（{{ information.studentFollow_count }}）</span>
            </p>
          </div>
          <div class="info_title">
            <p
              style="background: linear-gradient(to bottom, #02C777, #02C766);"
            >
              <i class="iconfont icon-shangji"></i>
            </p>
            <p>商机（{{ information.opportunity_count }}）</p>
            <div>
              <p>
                <i class="iconfont icon-hao" @click="createChance = true"></i>
              </p>
              <p v-show="!showMoreList[0].showMore" @click="showMore(0, true)">
                <i class="iconfont icon-down2" style="font-weight: 600;"></i>
              </p>
              <p v-show="showMoreList[0].showMore" @click="showMore(0, false)">
                <i class="iconfont icon-up2" style="font-weight: 600;"></i>
              </p>
            </div>
          </div>
          <transition name="fade">
            <div
              class="title_config"
              v-if="showMoreList[0].showMore"
              transition="fade"
            >
              <el-table :data="information.opportunity_list" min-height="500">
                <el-table-column
                  v-for="(item, index) in nicheCaption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[item.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="info_title">
            <p
              style="background: linear-gradient(to bottom, #F27250, #F27350);"
            >
              <i class="iconfont icon-yuyue"></i>
            </p>
            <p>预约记录（{{ information.appointment_count }}）</p>
            <div>
              <p>
                <i
                  class="iconfont icon-hao"
                  @click="goToURL('appointDetail')"
                ></i>
              </p>
              <p v-show="!showMoreList[1].showMore" @click="showMore(1, true)">
                <i class="iconfont icon-down2" style="font-weight: 600;"></i>
              </p>
              <p v-show="showMoreList[1].showMore" @click="showMore(1, false)">
                <i class="iconfont icon-up2" style="font-weight: 600;"></i>
              </p>
            </div>
          </div>
          <transition name="fade">
            <div class="title_config" v-if="showMoreList[1].showMore">
              <el-table :data="information.appointment_list" min-height="500">
                <el-table-column
                  v-for="(item, index) in appointmentCaption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[item.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="info_title">
            <p
              style="background: linear-gradient(to bottom, #AA46EB, #9246EB);"
            >
              <i class="iconfont icon-contract"></i>
            </p>
            <p>合同（{{ information.contract_count }}）</p>
            <div>
              <p><i class="iconfont icon-hao"></i></p>
              <p v-show="!showMoreList[2].showMore" @click="showMore(2, true)">
                <i class="iconfont icon-down2" style="font-weight: 600;"></i>
              </p>
              <p v-show="showMoreList[2].showMore" @click="showMore(2, false)">
                <i class="iconfont icon-up2" style="font-weight: 600;"></i>
              </p>
            </div>
          </div>
          <transition name="fade">
            <div class="title_config" v-if="showMoreList[2].showMore">
              <el-table :data="information.contract_list" min-height="500">
                <el-table-column
                  v-for="(item, index) in contractCaption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[item.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="info_title">
            <p
              style="background: linear-gradient(to bottom, #FF931A, #FF6E1A);"
            >
              <i class="iconfont icon-shoukuan"></i>
            </p>
            <p>前台调研（{{ information.contractIncome_count }}）</p>
            <div>
              <p><i class="iconfont icon-hao"></i></p>
              <p v-show="!showMoreList[3].showMore" @click="showMore(3, true)">
                <i class="iconfont icon-down2" style="font-weight: 600;"></i>
              </p>
              <p v-show="showMoreList[3].showMore" @click="showMore(3, false)">
                <i class="iconfont icon-up2" style="font-weight: 600;"></i>
              </p>
            </div>
          </div>
          <transition name="fade">
            <div class="title_config" v-if="showMoreList[3].showMore">
              <el-table
                :data="information.contractIncome_list"
                min-height="500"
              >
                <el-table-column
                  v-for="(item, index) in incomeCaption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[item.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="info_title">
            <p
              style="background: linear-gradient(to bottom, #17B3EB, #1799EB);"
            >
              <i class="iconfont icon-genjin1"></i>
            </p>
            <p>跟进记录（{{ information.studentFollow_count }}）</p>
            <div>
              <p>
                <i
                  class="iconfont icon-hao"
                  @click="followCustomerModal = true"
                ></i>
              </p>
              <p v-show="!showMoreList[4].showMore" @click="showMore(4, true)">
                <i class="iconfont icon-down2" style="font-weight: 600;"></i>
              </p>
              <p v-show="showMoreList[4].showMore" @click="showMore(4, false)">
                <i class="iconfont icon-up2" style="font-weight: 600;"></i>
              </p>
            </div>
          </div>
          <transition name="fade">
            <div class="title_config" v-if="showMoreList[4].showMore">
              <el-table :data="information.studentFollow_list" min-height="500">
                <el-table-column
                  v-for="(item, index) in studentFollowCaption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row[item.value] }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </transition>
        </el-tab-pane>
        <!-- 详情页的tab -->
        <el-tab-pane label="资料" name="data">
          <el-form
            ref="form"
            :model="formData"
            :rules="rules"
            label-width="150px"
          >
            <p class="basic_title">基本信息</p>
            <div class="basic_content">
              <el-form-item label="潜客编号：" prop="sno">
                <el-input
                  v-model="formData.sno"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="formData.name"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="英文名称：" prop="enname">
                <el-input
                  v-model="formData.enname"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话：" prop="mobile">
                <el-input
                  v-model="formData.mobile"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱：" prop="email">
                <el-input
                  v-model="formData.email"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-select v-model="formData.sex" disabled>
                  <el-option
                    v-for="item in sexData"
                    :key="item.value"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                  v-model="formData.birthday"
                  type="date"
                  disabled
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="意向：" prop="intention">
                <el-select v-model="formData.intention" disabled>
                  <el-option
                    v-for="item in intentionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在城市：" prop="city">
                <el-select v-model="formData.city" disabled>
                  <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="家庭住址：" prop="address">
                <el-input
                  v-model="formData.address"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="QQ：" prop="qq">
                <el-input
                  v-model="formData.qq"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="微信：" prop="wechat">
                <el-input
                  v-model="formData.wechat"
                  style="width: 218px;"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="来源渠道：" prop="source">
                <el-select v-model="formData.source" disabled>
                  <el-option
                    v-for="item in sourceData"
                    :key="item.value"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="负责人：" prop="teacher_id">
                <el-select v-model="formData.teacher_id" disabled>
                  <el-option
                    v-for="item in teacherList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <link-details
              :moduleData="moduleData"
              :formData="formData"
              @changeFormData="changeFormData"
            ></link-details>
            <p class="basic_title">备注</p>
            <div class="basic_content">
              <div id="remark"></div>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增页面 -->
    <el-card class="tab" v-if="pageType === 'create'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content creatInfo">
          <!-- <el-form-item label="潜客编号：" prop="sno">
                        <el-input v-model="formData.sno" style="width: 218px;" placeholder="请填写学员编号" disabled></el-input>
                    </el-form-item> -->
          <el-row :gutter="2">
            <el-col :span="8">
              <el-form-item label="头像">
                <template slot-scope="scope">
                  <div class="avatar_wrap">
                    <el-upload
                      :class="{ 'avatar-uploader': !imageUrl }"
                      style="height: 40px;"
                      :action="uploadFileURL"
                      accept="image/jpeg,image/gif,image/png"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </div>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名：" prop="name">
                <el-input
                  v-model="formData.name"
                  style="width: 218px;"
                  placeholder="请填写姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="英文名称：" prop="enname">
                <el-input
                  v-model="formData.enname"
                  style="width: 218px;"
                  placeholder="请填写英文名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="8">
              <el-form-item label="联系电话：" prop="mobile">
                <el-input
                  v-model="formData.mobile"
                  style="width: 218px;"
                  placeholder="请填写联系电话"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="邮箱：" prop="email">
                <el-input
                  v-model="formData.email"
                  style="width: 218px;"
                  placeholder="请填写邮箱"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别：" prop="sex">
                <el-select v-model="formData.sex" placeholder="请选择性别">
                  <el-option
                    v-for="item in sexData"
                    :key="item.value"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="8">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker
                  v-model="formData.birthday"
                  type="date"
                  placeholder="选择出生日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向：" prop="intention">
                <el-select
                  v-model="formData.intention"
                  placeholder="请选择意向"
                >
                  <el-option
                    v-for="item in intentionList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在城市：" prop="city">
                <el-select v-model="formData.city" placeholder="请选择意向">
                  <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="8">
              <el-form-item label="家庭住址：" prop="address">
                <el-input
                  v-model="formData.address"
                  style="width: 218px;"
                  placeholder="请填写家庭住址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="QQ：" prop="qq">
                <el-input
                  v-model="formData.qq"
                  style="width: 218px;"
                  placeholder="请填写QQ"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信：" prop="wechat">
                <el-input
                  v-model="formData.wechat"
                  style="width: 218px;"
                  placeholder="请填写微信"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="2">
            <el-col :span="12">
              <el-form-item label="来源渠道：" prop="source">
                <el-select v-model="formData.source" placeholder="请选择来源">
                  <el-option
                    v-for="item in sourceData"
                    :key="item.value"
                    :label="item.label"
                    :value="parseInt(item.value)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="负责人：" prop="teacher_id">
                <el-select
                  v-model="formData.teacher_id"
                  placeholder="请选择负责人"
                >
                  <el-option
                    v-for="item in teacherList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <link-details
          :moduleData="moduleData"
          :formData="formData"
          @changeFormData="changeFormData"
        ></link-details>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" :model="formData.remark">
            <link-editor
              @editor-info="getEditorInfo"
              :editorInfo="formData.remark"
            ></link-editor>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 编辑页面 -->
    <el-card class="tab" v-if="pageType === 'edit'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <el-form-item label="潜客编号：" prop="sno">
            <el-input
              v-model="formData.sno"
              style="width: 218px;"
              placeholder="请填写学员编号"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="英文名称：" prop="enname">
            <el-input
              v-model="formData.enname"
              style="width: 218px;"
              placeholder="请填写英文名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="mobile">
            <el-input
              v-model="formData.mobile"
              style="width: 218px;"
              placeholder="请填写联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email">
            <el-input
              v-model="formData.email"
              style="width: 218px;"
              placeholder="请填写邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别：" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option
                v-for="item in sexData"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出生日期：" prop="birthday">
            <el-date-picker
              v-model="formData.birthday"
              type="date"
              placeholder="选择出生日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="意向：" prop="intention">
            <el-select v-model="formData.intention" placeholder="请选择意向">
              <el-option
                v-for="item in intentionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在城市：" prop="city">
            <el-select v-model="formData.city" placeholder="请选择意向">
              <el-option
                v-for="item in cityList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="家庭住址：" prop="address">
            <el-input
              v-model="formData.address"
              style="width: 218px;"
              placeholder="请填写家庭住址"
            ></el-input>
          </el-form-item>
          <el-form-item label="QQ：" prop="qq">
            <el-input
              v-model="formData.qq"
              style="width: 218px;"
              placeholder="请填写QQ"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信：" prop="wechat">
            <el-input
              v-model="formData.wechat"
              style="width: 218px;"
              placeholder="请填写微信"
            ></el-input>
          </el-form-item>
          <el-form-item label="来源渠道：" prop="source">
            <el-select v-model="formData.source" placeholder="请选择来源">
              <el-option
                v-for="item in sourceData"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="负责人：" prop="teacher_id">
            <el-select v-model="formData.teacher_id" placeholder="请选择负责人">
              <el-option
                v-for="item in teacherList"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <link-details
          :moduleData="moduleData"
          :formData="formData"
          @changeFormData="changeFormData"
        ></link-details>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" :model="formData.remark">
            <link-editor
              @editor-info="getEditorInfo"
              :editorInfo="formData.remark"
            ></link-editor>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 生成商机 -->
    <el-dialog :visible.sync="createChance" width="579px" class="create_chance">
      <el-form
        ref="nicheformRef"
        :model="nicheFormData"
        :rules="nicheFormRules"
        label-width="80px"
      >
        <el-form-item label="商机主题" prop="title">
          <el-input v-model="nicheFormData.title"></el-input>
        </el-form-item>
        <el-form-item label="商机备注" prop="remark">
          <el-input
            v-model="nicheFormData.remark"
            type="textarea"
            :rows="5"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button @click="createChance = false">取 消</el-button>
        <el-button type="primary" @click="createNiche">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="operateTile"
      width="510px"
      :visible.sync="showLatentModal"
      class="latent_modal"
    >
      <!-- 分派潜客 -->
      <div class="content" v-if="operateTile === '分派潜客'">
        <el-input
          class="search_teacher"
          placeholder="请输入内容"
          v-model="searchTeacher"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="radio">
          <div v-for="teacher in teachers" :key="teacher.id">
            <el-radio
              v-model="selectTeacher"
              :label="teacher.id"
              @change="changeAsssign"
              >{{ teacher.name }}</el-radio
            >
          </div>
        </div>
      </div>
      <!-- 分享潜客 -->
      <div class="content" v-if="operateTile === '共享潜客'">
        <el-input
          class="search_teacher"
          placeholder="请输入内容"
          v-model="searchTeacher"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <div class="check">
          <el-checkbox-group
            v-model="checkedTeachers"
            @change="handleCheckedTeachersChange"
            class="teacher_checkbox_group"
          >
            <el-checkbox
              class="teacher_checkbox"
              v-for="teacher in teachers"
              :label="teacher.label"
              :key="teacher.value"
              >{{ teacher.label }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="btn">
        <el-button @click="showLatentModal = false">返回</el-button>
        <el-button
          type="primary"
          @click="showLatentModal = false"
          v-if="operateTile === '共享潜客'"
          >确认</el-button
        >
        <el-button
          type="primary"
          @click="confirmAssign"
          v-if="operateTile === '分派潜客'"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 跟进弹框 -->
    <el-dialog
      :title="`跟进${formData.name}`"
      :visible.sync="followCustomerModal"
      width="749px"
    >
      <div class="follow_customer">
        <el-form
          ref="followForm"
          :model="followFormData"
          :rules="followRules"
          label-width="150px"
          class="follow_form"
        >
          <el-form-item label="跟进时间" prop="title" width="100%">
            <el-date-picker
              v-model="followFormData.current_time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进方式" prop="way">
            <el-select v-model="followFormData.way" placeholder="请选择">
              <el-option
                v-for="item in followWay"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跟进结果" prop="result">
            <el-select v-model="followFormData.result" placeholder="请选择">
              <el-option
                v-for="item in followResult"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下次跟进时间" prop="next_time">
            <el-date-picker
              v-model="followFormData.next_time"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跟进主题" prop="title">
            <el-input
              v-model="followFormData.title"
              placeholder="请输入跟进内容"
              type="textarea"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="跟进内容" prop="content">
            <el-input
              type="textarea"
              :rows="5"
              v-model="followFormData.content"
              placeholder="请输入跟进内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加图片">
            <el-upload
              class="upload-demo"
              :action="uploadFileURL"
              accept="image/jpeg,image/png"
              multiple
              :on-preview="handlePreview"
              :on-success="handlePictureSuccess"
              :before-upload="beforeAvatarUpload1"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture-card"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                支持JPG、PNG格式图片，图片应该小于50M，最多支持上传3张图片
              </div>
            </el-upload>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="followCustomerModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmFollow">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 已流失 -->
    <el-dialog title="流失客户" :visible.sync="closeModal" width="579px">
      <div class="closeModalContent" style="position: relative">
        <p style="margin-bottom: 20px;">流失原因</p>
        <el-input type="textarea" :rows="5" v-model="closeReason"> </el-input>
        <p
          v-if="noReason"
          style="position: absolute;left: 0;bottom: -23px; color: red;"
        >
          请填写流失原因
        </p>
      </div>
      <div class="btn">
        <el-button @click="closeModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmLoss">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看潜客日志 -->
    <el-dialog
      title="查看潜客日志"
      :visible.sync="seeJournalModal"
      width="800px"
    >
      <div>
        <el-table
          :data="customerLog"
          min-height="500"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            align="center"
            width="60"
            label="序号"
          />
          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="btn">
            </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { changeTitleMinin, detailsMinin } from "@/mixin";
import { uploadFileURL } from "@/utils/url";
import http from "@/api/customer";
import studentFollowHttp from "@/api/student_follow";
import studentLogHttp from "@/api/student_log";
import globalApi from "@/api/global";
import { formatArray } from "@/utils";
import details from "@/components/details";
import editor from "@/components/editor";
export default {
  name: "customerInfo",
  mixins: [changeTitleMinin, detailsMinin],
  components: {
    linkDetails: details,
    linkEditor: editor
  },
  data() {
    return {
      globalApi: globalApi,
      http: http,
      information: {},
      nicheCaption: [
        {
          label: "商机主题",
          value: "title"
        },
        {
          label: "潜客姓名",
          value: "name"
        },
        {
          label: "手机号码",
          value: "mobile"
        },
        {
          label: "来源渠道",
          value: "source"
        },
        {
          label: "商机状态",
          value: "opport_status"
        },
        {
          label: "负责人",
          value: "username"
        },
        {
          label: "创建时间",
          value: "create_time"
        }
      ],
      appointmentCaption: [
        {
          label: "潜客姓名",
          value: "name"
        },
        {
          label: "预约名称 ",
          value: "title"
        },
        {
          label: "预约中心",
          value: "branch_name"
        },
        {
          label: "预约者",
          value: "username"
        },
        {
          label: "预约时间",
          value: "appoint_time"
        },
        {
          label: "到访时间",
          value: "visit_time"
        },
        {
          label: "创建时间",
          value: "create_time"
        }
      ],
      contractCaption: [
        {
          label: "合同编号",
          value: "contractNo"
        },
        {
          label: "潜客姓名",
          value: "name"
        },
        {
          label: "产品线",
          value: "product"
        },
        {
          label: "手机号码",
          value: "mobile"
        },
        {
          label: "合同状态",
          value: "contract_status"
        },
        {
          label: "创建时间",
          value: "create_time"
        },
        {
          label: "开始时间",
          value: "start_date"
        },
        {
          label: "结束时间",
          value: "end_date"
        }
      ],
      incomeCaption: [
        {
          label: "潜客姓名",
          value: "name"
        }
      ],
      studentFollowCaption: [
        {
          label: "潜客姓名",
          value: "name"
        }
      ],
      limitThree: true,
      selectedNum: 0,
      activeName: "about",
      createChance: false,
      showMoreList: [
        {
          showMore: true
        },
        {
          showMore: false
        },
        {
          showMore: false
        },
        {
          showMore: false
        },
        {
          showMore: false
        }
      ],
      teachers: [],
      tableCaption: [
        {
          label: "时间",
          value: "create_time"
        },
        {
          label: "日志情况",
          value: "log"
        },
        {
          label: "操作人",
          value: "role"
        }
      ],
      // formData: null,
      followFormData: {},
      followRules: {
        current_time: [{ required: true, message: "请填写跟进时间" }],
        content: [{ required: true, message: "请填写内容" }],
        picarr: [{ required: true, message: "请上传图片" }],
        way: [{ required: true, message: "请选择跟进方式" }],
        result: [{ required: true, message: "请选择跟进结果" }],
        next_time: [{ required: true, message: "请选择下次跟进时间" }]
      },
      fileList: [],
      rules: {
        name: [{ required: true, message: "请填写姓名" }],
        mobile: [
          { required: true, message: "请填写手机号" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号填写有误",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        sex: [{ required: true, message: "请选择性别" }],
        birthday: [{ required: true, message: "请选择出生日期" }],
        source: [{ required: true, message: "请选择报名渠道" }],
        city: [{ required: true, message: "请选择城市" }]
      },
      sexList: [
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      pageType: "details",
      showLatentModal: false,
      followCustomerModal: false,
      seeJournalModal: false,
      closeModal: false,
      closeReason: "",
      noReason: false,
      operateTile: null,
      searchTeacher: null,
      selectTeacher: null,
      checkedTeachers: [],
      teacherList: [],
      uploadFileURL,
      imageUrl: null,
      pageParams: null,
      teacher_id: null,
      leader: "",
      formData: {},
      followFileList: [],
      followResult: [],
      followWay: [],
      userData: null,
      intentionList: [],
      cityList: [],
      customerLog: [],
      nicheFormData: {
        // 生成商机的表单数据
        title: "",
        remark: ""
      },
      nicheFormRules: {
        title: { required: true, message: "请输入商机主题", trigger: "blur" }
      }
    };
  },
  filters: {
    filterCustomerStatus(val) {
      let customerStatus = JSON.parse(sessionStorage.getItem("customerStatus"));
      let value = "";
      for (let status of customerStatus) {
        if (status.status === val) {
          value = status.label;
          break;
        }
      }
      return value;
    }
  },
  methods: {
    goToURL(name) {
      this.$router.push({ name });
    },
    getEditorInfo(data) {
      this.formData.remark = data;
    },
    // 生成商机
    createNiche() {
      let user_id = this.pageParams.id;
      http.createNiche({ user_id }).then(res => {
        this.$message.success(res.msg || "生成商机成功！");
        this.createChance = false;
        this.getInfo();
      });
    },
    // 切换负责人
    changeAsssign(val) {
      this.teacher_id = val;
    },
    // 确认分派
    confirmAssign() {
      let params = {
        user_id: this.pageParams.id,
        teacher_id: this.teacher_id
      };
      http.assignCustomer(params).then(res => {
        this.$message.success(res.msg || "分派成功！");
        this.showLatentModal = false;
        this.getInfo();
      });
    },
    // 确认流失
    confirmLoss() {
      if (this.closeReason === "") {
        this.noReason = true;
      } else {
        let params = {
          user_id: this.pageParams.id,
          remark: this.closeReason
        };
        http.lossCustomer(params).then(res => {
          this.$message.success(res.msg || "操作成功！");
          this.closeModal = false;
          this.getInfo();
        });
      }
    },
    // 确认跟进
    confirmFollow() {
      this.$refs["followForm"].validate(valid => {
        if (valid) {
          let picarr = [];
          for (let pic of this.followFileList) {
            if (pic.response) {
              picarr.push({
                url: pic.response.data
              });
            } else {
              picarr.push({
                url: pic.url
              });
            }
          }
          this.userData = JSON.parse(sessionStorage.getItem("user"));
          this.followFormData.picarr = JSON.stringify(picarr);
          this.followFormData.user_id = this.pageParams.id;
          this.followFormData.center_id = this.userData.center_id;
          let params = this.followFormData;
          studentFollowHttp.createContent(params).then(res => {
            this.$message.success(res.msg || "新增跟进记录成功！");
            this.followCustomerModal = false;
            this.getInfo();
          });
        }
      });
    },
    closeNiche() {
      this.closeModal = true;
      this.noReason = false;
    },
    handlePreview() {},
    handleRemove(file, fileList) {
      this.followFileList = fileList;
      console.log(this.followFileList.length);
    },
    handlePictureSuccess(res, file, fileList) {
      this.followFileList = fileList;
      console.log(this.followFileList.length);
    },
    handleAvatarSuccess(res, file) {
      console.log("res, file:", res, file);
      this.formData["headimgurl"] = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isPicture =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPicture) {
        this.$message.error("上传头像图片只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPicture && isLt2M;
    },
    beforeAvatarUpload1(file) {
      const isPicture = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 50;
      const isLt3pic = this.followFileList.length <= 3;
      if (!isPicture) {
        this.$message.error("上传只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 50MB!");
      }
      if (!isLt3pic) {
        this.$message.error("上传图片最多3长!");
      }
      return isPicture && isLt2M && isLt3pic;
    },
    edit() {
      this.pageType = "edit";
    },
    handleClick() {},
    showMore(index, isShow) {
      this.showMoreList[index].showMore = isShow;
    },
    // 验证邮箱是否唯一
    verifyCommonUnique(type) {
      let data = {};
      data[type] = this.formData[type];
      globalApi.verifyCommonUnique(data, "student").then(res => {
        // 调用主动验证
        // valid: false 为验证失败，已存在
      });
    },
    // 分派潜客
    assignCustomer() {
      this.operateTile = "分派潜客";
      this.showLatentModal = true;
    },
    // 共享潜客
    shareCustomer() {
      this.operateTile = "共享潜客";
      this.showLatentModal = true;
    },
    handleCheckedTeachersChange() {},
    getTeacher() {
      http.getTeacher().then(res => {
        console.log("getTeacherList:", res);
        this.teacherList = res.data;
      });
    },
    // 跟进结果
    getFollowResult() {
      let varname = "follow_result";
      globalApi.getWebConfig({ varname }).then(res => {
        this.followResult = res.data;
      });
    },
    // 跟进方式
    getFollowWay() {
      let varname = "follow_way";
      globalApi.getWebConfig({ varname }).then(res => {
        this.followWay = res.data;
      });
    },
    // 城市
    getCity() {
      let varname = "center_city";
      globalApi.getWebConfig({ varname }).then(res => {
        this.cityList = res.data;
      });
    },
    // 获取产品意向
    getIntention() {
      let varname = "intention";
      globalApi.getWebConfig({ varname }).then(res => {
        this.intentionList = res.data;
      });
    },
    getInfo() {
      if (this.pageParams.id) {
        let id = this.pageParams.id;
        http.getContentDetail({ id }).then(res => {
          this.formData = res.data;
          showRemark(this.formData.remark);
          this.customerLog = res.log;
          if (this.formData.teacher_id) {
            for (let teacher of this.teachers) {
              if (teacher.id === this.formData.teacher_id) {
                this.leader = teacher.name;
              }
            }
          }
        });
        let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
        let contractStatusList = [];
        let keysData = Object.keys(basicConfig.contract_status);
        if (keysData.length) {
          keysData.map(item => {
            contractStatusList.push({
              value: item,
              label: basicConfig.contract_status[item].a
            });
          });
        }
        http.getCustomerInfo({ id }).then(res => {
          console.log(this.sourceData);
          this.information = res;
          for (let contract of this.information.contract_list) {
            contract.product = contract.product === "dyned" ? "成人" : "青少";
            for (let status of contractStatusList) {
              if (contract.contract_status === status.value) {
                contract.contract_status = status.label;
              }
            }
          }
          let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
          let nicheStatus = formatArray(basicConfig.opport_status);
          for (let niche of this.information.opportunity_list) {
            for (let status of nicheStatus) {
              if (niche.opport_status === status.label.status) {
                niche.opport_status = status.label.label;
              }
            }
            for (let source of this.sourceData) {
              if ((source.value = niche.source)) {
                niche.source = source.label;
              }
            }
          }
        });
      }
      this.formData.remark = this.editorContent;
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      console.log("basicConfig:", basicConfig);

      let sourceData = [];
      let keysData = Object.keys(basicConfig.source);
      if (keysData.length) {
        keysData.map(item => {
          sourceData.push({ value: item, label: basicConfig.source[item].a });
        });
        //console.log('sourceData:',sourceData);
        this.sourceData = sourceData;
      }

      this.sexData = formatArray(basicConfig.sex);

      this.getPageParams("customerDetailsParams", () => {
        this.getCommonModuleFields("student");
      });
    }
  },
  created() {
    this.init();
    this.getTeacher();
    http.getTeacherList().then(res => {
      this.teachers = res.data.data;
    });
    this.getFollowResult();
    this.getFollowWay();
    this.getIntention();
    this.getCity();
  },
  mounted() {
    this.getInfo();
  }
};
function showRemark(html) {
  var remark = document.getElementById("remark");
  remark.innerHTML = html;
  var imgs = remark.getElementsByTagName("img");
  for (let img of imgs) {
    img.style.width = "100px";
  }
}
</script>

<style lang="scss" scoped>
.customerDetailInfo {
  .card /deep/.el-card__body {
    padding: 0;
  }
  .top_nav {
    padding-left: 34px;
    div {
      display: flex;
      padding: 25px 0;
      p {
        margin-right: 20px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
    }
  }
  .line {
    height: 1px;
    width: 100%;
    background: #bfbfbf;
  }
  .header_info {
    position: relative;
    padding: 26px 0 45px 34px;
    display: flex;
    &_img {
      width: 47px;
      height: 47px;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 47px;
        height: 47px;
      }
    }
    &_config {
      padding-left: 26px;
      padding-right: 26px;
      border-right: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-of-type {
        border-right: none;
      }
      p {
        &:nth-of-type(1) {
          font-size: 14px;
          color: #565656;
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
          font-weight: 600;
        }
      }
    }
    .save_info {
      display: flex;
      position: absolute;
      right: 40px;
      top: 36px;
      p {
        margin-left: 20px;
        border-radius: 5px;
        cursor: pointer;
        &:nth-of-type(1) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
        &:nth-of-type(2) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
        // &:nth-of-type(2) {
        //   color: #999999;
        //   padding: 9px 12px;
        //   border: 1px solid #eeeeee;
        // }
      }
    }
  }
  .empty {
    width: 100%;
    height: 10px;
    background: #ebebeb;
  }
  .tab {
    padding: 0 34px;
    .config_num {
      display: flex;
      margin-bottom: 36px;
      p {
        padding: 8px 16px;
        border-radius: 5px;
        background: #ebf7ff;
        font-size: 14px;
        color: #72777a;
        margin-right: 12px;
        span {
          color: #6eb8f0;
        }
        // &:last-of-type {
        //     background: none;
        //     color: #6EB8F0;
        //     cursor: pointer;
        // }
      }
    }
    .info_title {
      display: flex;
      margin-bottom: 16px;
      position: relative;
      & > p {
        line-height: 36px;
        color: #999999;
        font-size: 18px;
        &:nth-of-type(1) {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          i {
            font-size: 20px;
            color: white;
          }
        }
      }
      div {
        position: absolute;
        right: 55px;
        display: flex;
        p {
          line-height: 36px;
          margin-left: 24px;
          cursor: pointer;
          i {
            font-size: 24px;
          }
        }
      }
    }
    .title_config {
      margin-bottom: 54px;
      ul {
        line-height: 47px;
        display: flex;
        list-style: none;
        padding-left: 47px;
        &:nth-of-type(1) {
          background: #f5f5f5;
          font-size: 16px;
          color: #333;
          font-weight: 600;
        }
        li {
          text-align: left;
          font-size: 14px;
          color: #565656;
          &:last-of-type {
            text-align: right;
            padding-right: 45px;
          }
        }
      }
    }
    .basic_title {
      width: 100%;
      line-height: 41px;
      background: #f5f5f5;
      padding-left: 24px;
      color: #333;
      font-size: 20px;
      font-weight: 600;
    }
    .basic_content {
      padding: 40px 0 44px 60px;
      padding-top: 40px;
      display: flex;
      flex-wrap: wrap;
      /deep/ .el-form-item {
        // width: 25%;
        font-weight: 600;
      }
      li {
        width: 25%;
        list-style: none;
        line-height: 45px;
        font-weight: 600;
        span {
          font-weight: 400;
        }
      }
    }
  }
  .create_chance {
    .business_pic {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 191px;
        height: 171px;
      }
    }
    .btn {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        width: 214px;
      }
    }
  }

  .latent_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .follow_customer {
    display: flex;
    width: 100%;
    .follow_form {
      width: 100%;
      /deep/ .el-upload-list {
        display: flex;
        li {
          width: 20%;
          margin-right: 10px;
          .el-upload-list__item-name {
            display: none;
          }
        }
      }
      .el-textarea {
        width: 80%;
      }
      .el-input {
        width: 80%;
      }
      .el-select {
        width: 80%;
      }
      /deep/ .el-upload--picture-card {
        border: none;
        line-height: 32px;
        height: 32px;
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 16px;
    color: #8c939d;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .avatar_wrap {
    width: 218px;
    height: 100%;
    .avatar {
      border-radius: 100%;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
    .avatar-uploader {
      height: 40px;
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .creatInfo {
    el-row {
      width: 100%;
      el-form-item {
        width: 100%;
      }
    }
  }
}
</style>
